<template>
  <Container>
    <template v-slot:content>
      <el-row class="elRow" :gutter="12">
        <el-col :span="4" class="elCol">
          <div class="grid-content">
            <TreeList titleName="选择区域" :treeList="areaList" :treeProps="{
              label: 'areaName',
              value: 'areaId',
              children: 'child'
            }" @getTreeNode="getTreeNode"></TreeList>
          </div>
        </el-col>
        <el-col :span="20" class="elCol">
          <div class="grid-content energyList">
            <div class="energy dailyEnergy">
              <div class="left">
                <div class="energyTitle">
                  <div class="title">当天能耗用量</div>
                  <EnumBtn @enumClick="enumClick_1"></EnumBtn>
                </div>
                <div class="chart">
                  <BarChart :dataList="hourDataList" :seriesName="lineSeriesName_1"></BarChart>
                </div>
              </div>
              <div class="right">
                <div class="title">日能耗总量</div>
                <div class="energyInfo">
                  <img src="@/assets/icon/zuo.png" alt="">
                  <div class="value">{{ yesterdayUse || 0 }}<span class="unitName">{{ energyUnit_1 }}</span> </div>
                  <div class="label">{{ `昨日用电（${yesterTime}）` }}</div>
                </div>
                <div class="energyInfo">
                  <img src="@/assets/icon/jin.png" alt="">
                  <div class="value">{{ todayUse || 0 }}<span class="unitName">{{ energyUnit_1 }}</span></div>
                  <div class="label">{{ `今日用电（${todayTime}）` }}</div>
                </div>
              </div>
            </div>
            <div class="energy monthlyEnergy">
              <div class="left">
                <div class="energyTitle">
                  <div class="title">当月能耗用量</div>
                  <EnumBtn @enumClick="enumClick_2"></EnumBtn>
                </div>
                <div class="chart">
                  <LineChart :dataList="datDataList" :seriesName="lineSeriesName_2"></LineChart>
                </div>
              </div>
              <div class="right">
                <div class="title">能耗累计用量</div>
                <div class="energyInfo allenergyInfo">
                  <img src="@/assets/icon/zong.png" alt="">
                  <div class="value">{{ monthUse || 0 }}<span class="unitName">{{ energyUnit_2 }}</span></div>
                </div>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
    </template>
  </Container>
</template>

<script>
import TreeList from "@/components/TreeList"
import Container from "@/components/Container"
import LineChart from "@/components/Echart/line.vue"
import BarChart from "@/components/Echart/bar.vue"
import FacilityTree from "@/components/FacilityTree"
import areaApi from '@/api/area'
import dataQueryApi from "@/api/dataQuery"
import { formatDate } from "@/utils/filterTime"
export default {
  name: 'EnergyOverview',
  components: {
    FacilityTree,
    LineChart,
    BarChart,
    Container,
    TreeList
  },
  data() {
    return {
      energyId_1: '',
      energyId_2: '',
      areaId: '',
      areaList: [],
      monthData: {},
      todayData: {},
      todayUse: '',
      todayTime: formatDate(new Date(), true),
      yesterTime: formatDate(new Date(), true, -1),
      yesterdayUse: '',
      hourDataList: [],
      monthUse: '',
      datDataList: [],
      lineSeriesName_1: '',
      lineSeriesName_2: '',
      energyUnit_1: '',
      energyUnit_2: ''

    }
  },
  mounted() {
    this.initData();
  },
  methods: {
    async initData() {
      let { data: areaList } = await areaApi.queryTreeByCondition({});
      this.areaList = areaList || [];
      this.getTreeNode(this.areaList[0] || {})
    },

    getTreeNode(node) {
      this.areaId = node.areaId;
      this.todayDataUse();
      this.monthDataUse();
    },
    todayDataUse() {
      if (this.energyId_2 && this.areaId) {
        let data = {
          areaId: this.areaId,
          energyId: this.energyId_1
        }
        dataQueryApi.todayUse(data).then(res => {
          console.log(res)
          let { todayUse, yesterdayUse, hourDataList } = res.data || {};
          this.todayUse = todayUse;
          this.yesterdayUse = yesterdayUse;
          this.hourDataList = (hourDataList || []).map(e => {
            return {
              time: e.recordTime,
              value: e.consumption || 0
            }
          });
        })
      } else {
        this.todayData = {

        }
      }
    },
    monthDataUse() {
      if (this.energyId_2 && this.areaId) {
        let data = {
          areaId: this.areaId,
          energyId: this.energyId_2
        }
        dataQueryApi.monthUse(data).then(res => {
          console.log(res)
          let { monthUse, datDataList } = res.data || {};
          this.monthUse = monthUse;
          this.datDataList = (datDataList || []).map(e => {
            return {
              time: formatDate(new Date(e.recordTime), true),
              value: e.consumption || 0
            }
          })
        })
      } else {
        this.monthData = {

        }
      }
    },
    enumClick_1(e) {
      this.lineSeriesName_1 = `能耗(${e.energyUnit})`
      this.energyUnit_1 = e.energyUnit;
      this.energyId_1 = e.energyId;
      this.todayDataUse();
    },
    enumClick_2(e) {
      this.lineSeriesName_2 = `能耗(${e.energyUnit})`
      this.energyUnit_2 = e.energyUnit;
      this.energyId_2 = e.energyId;
      this.monthDataUse();
    },
  }
}
</script>

<style lang="scss" scoped>
.elRow {
  width: 100%;
  height: 100%;

  .elCol {
    height: 100%;

    .grid-content {
      width: 100%;
      height: 100%;
      background-color: #ffffff;
    }

    .energyList {
      background-color: transparent;

      .energy {
        height: calc(50% - 9px);
        margin-bottom: 18px;
        background-color: #ffffff;
        padding: 16px;
        box-sizing: border-box;
        border-radius: 5px;
        display: flex;
        justify-content: center;
        align-items: center;

        &:last-child {
          margin-bottom: 0;
        }

        .left {
          width: calc(80% - 1px);
          height: 100%;
          padding-right: 15px;

          .energyTitle {
            display: flex;
            justify-content: space-between;
            align-items: center;
          }

          .chart {
            height: calc(100% - 40px);
            background-color: #F8F8F8;
          }
        }

        .right {
          width: calc(20%);
          height: 100%;
          border-left: 1px solid #EAEAEA;
          padding-left: 15px;

          .energyInfo {
            width: 100%;
            height: calc((100% - 55px) / 2);
            margin-bottom: 15px;
            background: #F7F7F7;
            border-radius: 5px;
            padding: 16px 0;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-wrap: wrap;

            &:last-child {
              margin-bottom: 0;
            }

            img {
              width: 35px;
              height: 35px;
              margin: 0 auto;
            }

            .value,
            .label {
              width: 100%;
              color: #6176D0;
              font-size: 26px;
              text-align: center;
            }

            .value {
              .unitName {
                font-size: 16px;
              }
            }

            .label {
              font-size: 14px;
              color: #4E4E4E;
            }
          }

          .allenergyInfo {
            height: calc(100% - 40px);
            padding: 90px 0;
          }
        }

      }
    }
  }
}

.title {
  font-weight: bold;
  font-size: 18px;
  color: #333333;
  text-align: left;
  height: 40px;
  line-height: 40px;
}
</style>
